<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
/*
*{list-style:none;margin:0;padding:0}
#div1{width:1400px;height:180px;margin:100px auto; position:absolute; border:1px red solid;}
img{float:left;margin-right:10px;} 
*/
/*
*{margin:0;padding:0;}
#div1{width:1050px;height:200px;margin:100px auto; position:relative;background:red;}
#div1 ul{ position:absolute;left:10px;top:10px;}
#div1 ul li{float:left;width:250px;height:180px;list-style:none;margin-right:10px;}overflow:hidden;

input{width:100px; height:50px;}
#btn1{ position:absolute;top:120px;left:280px;}
#btn2{ position:absolute;top:120px;left:1000px;}
*/

*{margin:0;padding:0;}
#div1{width:500px;height:108px;margin:100px auto; position:relative;overflow: hidden;}
#div1 ul{ position:absolute; left:0; top:0}
#div1 ul li{float:left;width:185px;height:108px;list-style:none}
</style>
<script>
window.onload=function()
{
	var oDiv=document.getElementById('div1');
	var oUl=oDiv.getElementsByTagName('ul')[0];
	//alert(oUl.length);
	var aLi=oUl.getElementsByTagName('li');
	var timer=null;
	//alert(oUl.offsetWidth);1040
	var speed=2;
	oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//图片又复制了一份
	//alert(oUl.innHTML);
	//效果：宽度不够，第二份oUl掉下来了
	//解决：
	oUl.style.width=aLi[1].offsetWidth*aLi.length+'px';
	//oUl宽度等于 任意一个li的宽度 乘以 li的长度
	//
	function move(){
		//当oUl滚完一半时，往回拉
		/*
            错,是操作oUl的左右，跟宽高不一样。
            if(oUl.offsetWidth<oUl.offsetWidth/2)
            {
                oUl.style.width='0';
            }
		*/
		/*
            错，因为这时的oUl.offsetLeft是负数，无法比较
            if(oUl.offsetLeft<oUl.offsetWidth/2)
            {
                oUl.style.left='0';
            }alert(oUl.offsetLeft);*/

			// if(oUl.offsetLeft<-oUl.offsetWidth/2)
			// {
			// 	oUl.style.left='0';
			// }
			if(oUl.offsetLeft>0)
			{
				oUl.style.left=-oUl.offsetWidth/2+'px';
			}
			oUl.style.left=oUl.offsetLeft+speed+'px';
		}
	timer=setInterval(move,30);
		
		oDiv.onmouseover=function()
		{
			clearInterval(timer);
		}
		oDiv.onmouseout=function()
		{
			timer=setInterval(move,30);
		}
		var oBtn1=document.getElementById('btn1');
		var oBtn2=document.getElementById('btn2');
		
		oBtn1.onclick=function()
		{
			speed=-2;
		}
		oBtn2.onclick=function()
		{
			speed=2;
		}
};
</script>
</head>

<body>
<input id="btn1" value="<<<"  type="button"/>
<input id="btn2" type="button" value=">>>"  />

<div id="div1">
	<ul>
    	<li><img src="image/1.jpg" /></li>
        <li><img src="image/2.jpg" /></li>
        <li><img src="image/3.jpg" /></li>
        <li><img src="image/4.jpg" /></li>
    </ul>
</div>

</body>
</html>
